<template>
  <view>

<!--    <view class="unit-card" v-html="hintInfo">-->

<!--    </view>-->
    <view style="position: relative">
      <head-bar-view title="楼栋信息" title-color="#fff" is-white-back="true"/>
      <view class="data-head-cls">

      </view>
      <house-card-view :info="info"/>
    </view>


    <view v-for="(item,ind) in list" :key="ind" @click="itemClick(item)">
      <item-house-view :item="item"/>
    </view>
    <no-data-view :list="list" :load-state="loadState"/>
    <uni-load-more :status="loadState">
    </uni-load-more>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import HeadBarView from "@/pages/components/head_bar_view.vue";
import ItemHouseView from "@/pages/house/components/item_house_view.vue";
import XRouterConfig from "@/api/XRouterConfig";
import ApiDefine from "@/api/ApiDefine";
import BaseApi from "@/api/BaseApi";
import NoDataView from "@/pages/components/no_data_view.vue";
import HouseCardView from "@/pages/house/components/house_card_view.vue";
import DataHeadView from "@/pages/data/components/data_head_view.vue";

@Component({
  components: {
    HeadBarView,
    ItemHouseView,
    HouseCardView,
    NoDataView,
  }
})
export default class UnitHouseDetailsView extends Vue {
  itemClick(item: any) {
    XRouterConfig.goTo('unit_house_level', {
      offid: item.offid,
      osid:this.osid
    })
  }

  osid:any = '';

  onLoad(option: any) {
    this.osid=option.osid ?? '';
    this.initData(option.osid ?? '')
  }

  info: any = {};
  loadState = '';
  async initData(osid: any) {
    let value = await BaseApi.instance().fetch(ApiDefine.UNIT_HOUSE_LIST_URL, {osid})
    if (value == null || value.code != 200) {
      return;
    }
    this.info = value.data;
  }

  get hintInfo() {
    return `总楼栋数：${this.info.totalbuild ?? ''}
      <br/>
      总建筑面积：${this.info.zjzarea ?? ''}m²总占地面积：${this.info.zzdarea}m²`;
  }

  get list() {
    return this.info.list ?? [];
  }

}
</script>

<style scoped>
.unit-card {
  background: #ECF2FF;
  box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  color: #3F77F4;
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  margin: 30rpx;
}

.data-head-cls{
  height: 150rpx;
  background: linear-gradient(0deg, #524FF1, #4078F5);
  border-bottom-left-radius: 8%;
  border-bottom-right-radius:  8%;
  position: absolute;
  top:88px;
  width: 100vw;
  z-index: -1;
}
</style>
